<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, tween, tweenmax" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>Image Sequence - Examples - ScrollMagic</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../../assets/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/style.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/examples.css" type="text/css">
	<link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="../../assets/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="../../assets/js/examples.js"></script>
	
	<script type="text/javascript" src="../../assets/js/lib/gsap3/gsap.min.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/ScrollMagic.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>
<body>
	<ul id="menu"></ul>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1 class="badge gsap">Image Sequence</h1>
						<h2>GIF-like behaviour controlled by the scroll bar</h2>
						<p>
							Animating through image sequences can be achieved by creating a tween that cycles through an array of images (like shown here).<br>
							A different approach would be to do it without TweenMax and just update the image using the scene <code>progress</code> event.<br>
							In production environments you would probably also use an image preloader to cache all images in the array.
						</p>
						<p>
							The method shown here can take advantage of the tweenmax repeat feature and will also work as an animation unbound from the scrollbar. Use the form to the left to toggle the duration if you're unsure what that means.
						</p>
						<p class="copyright">
							Drawings are courtesy of <a href="http://eledimassimo.blogspot.co.uk/" target="_blank">Eleonora Di Massimo</a>.
						</p>
						<a href="#" class="viewsource">view source</a>
					</div>
				</section>
				<section class="demo">
					<form class="move">
						<fieldset>
							<legend>Toggle duration</legend>
							<div>
								<input type="radio" name="duration" id="bound" value="300" checked>
								<label for="bound">bound to scrollbar (duration = 300)</label>
							</div>
							<div>
								<input type="radio" name="duration" id="unbound" value="0">
								<label for="unbound">unbound from scrollbar (duration = 0)</label>
							</div>
						</fieldset>
					</form>
					<div class="spacer s2"></div>
					<div class="spacer s0" id="trigger"></div>
					<div id="imagesequence">
						<img id="myimg"/><br>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s2"></div>
					<script>
						// define images
						var images = [
							"../../assets/img/example_imagesequence_01.png",
							"../../assets/img/example_imagesequence_02.png",
							"../../assets/img/example_imagesequence_03.png",
							"../../assets/img/example_imagesequence_04.png",
							"../../assets/img/example_imagesequence_05.png",
							"../../assets/img/example_imagesequence_06.png",
							"../../assets/img/example_imagesequence_07.png"
						];

						// TweenMax can tween any property of any object. We use this object to cycle through the array
						var obj = {curImg: 0};

						// create tween
						var tween = TweenMax.to(obj, 0.5,
							{
								curImg: images.length - 1,	// animate propery curImg to number of images
								roundProps: "curImg",				// only integers so it can be used as an array index
								repeat: 3,									// repeat 3 times
								immediateRender: true,			// load first image automatically
								ease: Linear.easeNone,			// show every image the same ammount of time
								onUpdate: function () {
								  $("#myimg").attr("src", images[obj.curImg]); // set the image source
								}
							}
						);

						// init controller
						var controller = new ScrollMagic.Controller();

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
										.setTween(tween)
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);

						// handle form change
						$("form.move input[name=duration]:radio").change(function () {
							scene.duration($(this).val());
						});
					</script>
				</section>
				<div class="spacer s_viewport"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../assets/js/tracking.js"></script>
</body>
</html>
